<template>
  <nav class="nav-box">
    <router-link class="nav-item" exact-active-class="income-active" to="/note/income">收入</router-link>
    <router-link class="nav-item" exact-active-class="outcome-active" to="/note/outcome"
      >支出</router-link
    >
  </nav>
</template>

<script setup lang="ts"></script>

<style scoped>
.nav-box {
  --tx-height: 42px;
  --border-color: #dcdcdc;
  --income-color: #99caeb;
  --outcome-color: #ff9999;
  height: var(--tx-height);
  display: flex;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  .nav-item {
    flex-grow: 1;
    text-align: center;
    line-height: var(--tx-height);
  }
}
.income-active {
  background-color: var(--income-color);
}
.outcome-active {
  background-color: var(--outcome-color);
}
</style>
